<template>
  <view class="user">
    <view v-for="(item, index) in pages" :key="index">
      <template v-if="item.name == 'user-info'">
        <w-user-info :content="item.content" :styles="item.styles" :user="userInfo" :is-login="isLogin" />
      </template>
      <template v-if="item.name == 'my-service'">
        <w-my-service :content="item.content" :styles="item.styles" />
      </template>
      <template v-if="item.name == 'user-banner'">
        <w-user-banner :content="item.content" :styles="item.styles" />
      </template>
    </view>
    <tabbar />
  </view>
</template>

<script>
import { mapActions, mapGetters, mapState } from 'vuex';
export default {
  data() {
    return {
      pages: []
    };
  },
  onLoad() {
    this.getData();
  },
  onShow() {
    this.getUser();
  },
  computed: {
    ...mapState(['userInfo']),
    ...mapGetters(['isLogin'])
  },
  methods: {
    ...mapActions(['getUser']),
    async getData() {
      const data = await uni.$u.api.getDecorate({ id: 2 });
      this.pages = JSON.parse(data.data);
      console.log(this.pages);
    },
    handleChange(index) {
      console.log(index);
      this.current = Number(index);
    }
  }
};
</script>

<style></style>
